<template>
  <div class="getVip">
    <image
      class="page-bg"
      src="https://ustatic.hudongmiao.com/%20miao/survey/get-vip-bg.png"
    />
    <div class="feature-part">
      <image class="star-icon" src="~@/static/images/mine/star-icon.png" />
      <image class="diamond-icon" src="~@/static/images/mine/diamond2.png" />
      <div class="part-title">推荐开通特权</div>
      <image class="star-icon" src="~@/static/images/mine/star-icon.png" />
    </div>
    <div class="feature-list">
      <div class="feature-container">
        <div class="feature-item">
          <image
            class="feature-icon"
            src="https://ustatic.hudongmiao.com/%20miao/survey/icon0.png"
          />
          <div class="feature-txt">{{ features[0].text }}</div>
        </div>
        <div class="feature-item">
          <image
            class="feature-icon"
            src="https://ustatic.hudongmiao.com/%20miao/survey/icon1.png"
          />
          <div class="feature-txt">{{ features[1].text }}</div>
        </div>
        <div class="feature-item">
          <image
            class="feature-icon"
            src="https://ustatic.hudongmiao.com/%20miao/survey/icon2.png"
          />
          <div class="feature-txt">{{ features[2].text }}</div>
        </div>
        <div class="feature-item">
          <image
            class="feature-icon"
            src="https://ustatic.hudongmiao.com/%20miao/survey/icon3.png"
          />
          <div class="feature-txt">{{ features[3].text }}</div>
        </div>
      </div>
    </div>
    <div class="vip-meal" v-if="appInfo.platform !== 'ios'">
      <div
        class="meal-item"
        :class="{ activeMeal: currentMealIndex === index }"
        v-for="(meal, index) in meals"
        :key="meal.meal_title"
        @click="changeMealIndex(index)"
      >
        <image
          class="meal-lab"
          src="https://ustatic.hudongmiao.com/%20miao/survey/most-buy-icon.png"
          v-if="index === 1"
        />
        <div class="meal-title">{{ meal.meal_title }}</div>
        <div class="meal-total">{{ `￥${meal.meal_total}` }}</div>
        <div class="meal-per-month">{{ `${meal.meal_per_month}元/月` }}</div>
      </div>
    </div>
    <button
      class="buy-btn"
      v-if="appInfo.platform === 'ios'"
      @click="showIosVipDialog"
    >
      联系客服，开通特权
    </button>
    <div class="buy-btn" @click="buyVip" v-else>立即开通</div>
    <uni-popup ref="iosGetVip" type="dialog">
      <view class="sessionQueryBox">
        <view class="queryCt">
          <view>即将进入客服会话。在客服会话中</view>
          <view>点击右下角图片即可开始充值</view>
        </view>
        <view class="bottom-operate">
          <button class="cancel-btn" @click="closeSessionQuery">取消</button>
          <button
            class="confirm-btn"
            open-type="contact"
            @click="closeSessionQuery"
            :show-message-card="true"
            send-message-path="subpkg/getVip"
            send-message-img="https://ustatic.hudongmiao.com/joymewContact/iosRecharge.png"
          >
            去充值
          </button>
        </view>
      </view>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue";
import { getVipMenus, buyVipMeal } from "@/api/api-getVip";
import { showToast } from "@/utils/tools";
import useApp from "@/stores/app";
import { useUser } from "@/stores/user-store";
import { onShow } from "@dcloudio/uni-app";
import { navigateTo } from "@/utils/navigate";
import { storeToRefs } from "pinia";

const appStore = useApp();
const { uploadReloadUserInfo } = appStore;
const { appInfo } = storeToRefs(appStore);

const userStore = useUser();
const { getUserInfo } = userStore;

// 获取组件实例
const currentInstance = getCurrentInstance();

/** 是否更新用户数据 */

const features = reactive<FeatureItem[]>([
  {
    id: 1,
    text: "享无限次数AI消息回复",
  },
  {
    id: 2,
    text: "最高级的人工智能模型",
  },
  {
    id: 3,
    text: "最长的答案（最多2000字）",
  },
  {
    id: 4,
    text: "100%绿色无广告",
  },
]);

onMounted(async () => {
  getVipMenu();
});

// #region vip套餐相关
let meals = reactive<MealItem[]>([]);
let currentMealIndex = ref(1);
const getVipMenu = async () => {
  // 初始化套餐信息
  meals.splice(0);
  const { data: res } = await getVipMenus();
  const { data: target } = res;
  target.forEach((item: any) => {
    meals.push({
      ...item,
    });
  });
  console.log("获取到的Vip套餐信息", meals);
};
/**
 * 更换选中的套餐
 */
const changeMealIndex = (index: number) => {
  currentMealIndex.value = index;
};
// #endregion

// #region 购买vip
const buyVip = async () => {
  // 获取订单信息
  const order = await getVipOrderInfo();
  console.log("订单信息", order);
  uni.requestPayment({
    provider: "wxpay", // 支付方式
    orderInfo: {
      appid: order.appId,
    },
    nonceStr: order.nonceStr, // 随机字符串
    signType: "MD5", // 写死MD5加密方式
    timeStamp: order.timeStamp, //生成订单时用到的时间戳
    paySign: order.paySign, // 签名
    package: order.package,
    success: (res) => {
      console.log("success", res);
      uploadReloadUserInfo(true);
      navigateTo("mine");
      showToast("支付成功~");
    },
    fail: (err) => {
      console.log("错误信息", err);
      showToast("支付取消~");
    },
  });
};
/** 获取vip订单信息 */
const getVipOrderInfo = async () => {
  const res: any = await buyVipMeal(meals[currentMealIndex.value].value);
  const copy = res.data.data;
  if (!copy) {
    showToast("获取订单信息失败，请稍后重试");
    return "";
  }
  // 将json转化为普通对象
  const target = JSON.parse(copy);
  return target.obj;
};
// #endregion

// #region iosvip
// 控制ios弹窗得显示
const isShowIosDialog = ref(false);
const showIosVipDialog = () => {
  const ins: any = currentInstance!.refs.iosGetVip;
  if (isShowIosDialog.value) {
    ins.close();
  } else {
    ins.open();
  }
};
const closeSessionQuery = () => {
  const ins: any = currentInstance!.refs.iosGetVip;
  ins.close();
};
// #endregion
</script>

<style scoped lang="scss">
.getVip {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  &::after,
  &::before {
    content: "";
    display: table;
    clear: both;
  }

  .page-bg {
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .feature-part {
    width: 100%;
    margin-top: 69rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;

    .star-icon {
      width: 27rpx;
      height: 27rpx;
    }
    .diamond-icon {
      width: 50rpx;
      height: 50rpx;
      margin-left: 31rpx;
    }
    .part-title {
      margin-left: 15rpx;
      margin-right: 31rpx;
      color: #ffffff;
      font-size: 38rpx;
      font-weight: bold;
    }
  }

  .feature-list {
    width: 100%;
    margin-top: 23rpx;
    padding: 0 31rpx;
    box-sizing: border-box;

    .feature-container {
      width: 100%;
      padding: 46rpx 31rpx;
      box-sizing: border-box;
      background-color: #32343c;
      border-radius: 4px;

      .feature-item {
        width: 100%;
        margin-bottom: 27rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .feature-icon {
          width: 65rpx;
          height: 65rpx;
          margin-right: 23rpx;
        }

        .feature-txt {
          color: #ffffff;
          font-size: 33rpx;
        }

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }

  .vip-meal {
    width: 100%;
    margin-top: 29px;
    display: flex;
    align-items: center;
    justify-content: center;

    .meal-item {
      width: 198rpx;
      height: 212rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 21rpx;
      border: 1px solid #bfb7cb;
      box-sizing: border-box;
      color: #ffffff;
      transition: all 0.3s ease-in-out;
      position: relative;

      &:nth-of-type(2) {
        margin: 0 46rpx;
      }

      .meal-lab {
        width: 140rpx;
        height: 42rpx;
        position: absolute;
        top: -4rpx;
        left: -4rpx;
      }

      .meal-title {
        font-size: 29rpx;
      }
      .meal-total {
        font-size: 42rpx;
        margin: 3px 0;
        font-weight: bold;
      }
      .meal-per-month {
        font-size: 25rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .activeMeal {
      transform: scale(1.2);
      background-color: rgba(23, 206, 146, 0.2);
      border: 1px solid #17ce92;
    }
  }

  .buy-btn {
    width: 688rpx;
    height: 81rpx;
    margin-top: 104rpx;
    background-color: #17ce92;
    border-radius: 8rpx;
    color: #ffffff;
    font-size: 31rpx;
    line-height: 81rpx;
    text-align: center;
    font-weight: 500;
  }

  .sessionQueryBox {
    width: 640rpx;
    border-radius: 32rpx;
    background-color: #ffffff;

    .queryCt {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.4);
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 40rpx 0;
      line-height: 51rpx;
    }

    .bottom-operate {
      height: 106rpx;
      display: flex;
      border-top: 2rpx solid #e0e0e0;
      position: relative;

      .cancel-btn {
        font-size: 32rpx;
        color: #323233;
        font-weight: 400;
        background-color: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        &::after {
          background-color: unset;
          border: unset;
        }
      }

      .confirm-btn {
        font-size: 32rpx;
        font-weight: 400;
        color: #1989fa;
        background-color: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;

        &::after {
          background-color: unset;
          border: unset;
        }
      }

      &::after {
        width: 2rpx;
        height: 100%;
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background-color: #e0e0e0;
      }
    }
  }
}
</style>
